<template>
  <div style="background-color: rgb(218 223 229 / 86%)">
    <!-- <TopBar /> -->

    <el-container class="common-layout">
      <el-aside class="asidebox" width="200px">
        <div class="functionbox">
          <div class="returnIndex" @click="returnIndex">返回首页</div>
          <ul class="functionul">
            <li @click.prevent="routerlinkHandle" data-componentName="Coursecontent" data-index="0">
              <div>
                <Opportunity :class="{ chosenColor: chosenIndex == 0 }" class="icon" />
                <em :class="{ chosenColor: chosenIndex == 0 }"> 课程内容 </em>
              </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Traintask" data-index="1">
              <div>
                <Operation :class="{ chosenColor: chosenIndex == 1 }" class="icon" />
                <em :class="{ chosenColor: chosenIndex == 1 }"> 实训任务 </em>
              </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Emulation" data-index="2">
              <div>
                <Cpu :class="{ chosenColor: chosenIndex == 2 }" class="icon" />
                <em :class="{ chosenColor: chosenIndex == 2 }"> 仿真任务 </em>
              </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Examindex" data-index="3">
              <div>
                <DocumentCopy :class="{ chosenColor: chosenIndex == 3 }" class="icon" />
                <em :class="{ chosenColor: chosenIndex == 3 }"> 考试 </em>
              </div>
            </li>
            <li @click.prevent="routerlinkHandle" data-componentName="Learnstatus" data-index="4">
              <div>
                <PieChart :class="{ chosenColor: chosenIndex == 4 }" class="icon" />
                <em :class="{ chosenColor: chosenIndex == 4 }"> 学习统计 </em>
              </div>
            </li>
          </ul>
        </div>
      </el-aside>
      <el-main class="mainbox m-30">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :lessonid="lessonid" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const historyParams = history.state
// 保存课程ID
let lessonid = ref(historyParams.lessonId)

onMounted(() => {
  // console.log('historyParams-id', historyParams)
  // console.log('route.meta', route.meta);

  // 路由跳转
  router.replace({
    name: 'Coursecontent',
    state: {
      lessonId: historyParams.lessonId
    }
  })

  // 如果是从考试详情跳转进入 直接转到课程考试模块
  if (route.meta.fromName == 'Examdetail') {
    chosenIndex.value = 3
    router.replace({
      name: 'Examindex',
      state: {
        lessonId: historyParams.lessonId
      }
    })
  }
})


// 当前功能索引
let chosenIndex = ref(0)

function routerlinkHandle(e) {
  let componentname = e.currentTarget.dataset.componentname
  let index = e.currentTarget.dataset.index

  chosenIndex.value = index
  // 路由跳转
  router.replace({
    name: componentname
  })
}

function returnIndex() {
  // 路由跳转
  router.replace({
    name: 'Index'
  })
  // router.go(-1)
}
</script>

<style scoped>
.common-layout {
  height: 100vh;
}

.returnIndex {
  position: relative;
  top: -260px;
  left: 70px;
  width: 130px;
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #000;
  cursor: pointer;
}

.returnIndex::before {
  position: absolute;
  top: 5px;
  left: -30px;
  content: '\e84b';
  display: block;
  font-family: 'iconfont' !important;
  font-size: 14px;
  /* color: #000; */
}

.asidebox {
  position: relative;
  background-color: #f2f4f7;
}

.mainbox {
  background-color: #f2f4f7;
  border-radius: 10px;
}

.functionbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  box-sizing: border-box;
  width: 200px;
  padding-top: 20px;
  /* background-color: deeppink; */
}

.functionul li div {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
}

.functionul li .icon {
  width: 20px;
  color: #4c4c4c;
  margin-left: 30px;
  margin-right: 10px;
}

.functionul li em {
  padding: 5px 0;
  line-height: 30px;
  font-size: 15px;
  color: #4c4c4c;
}

.functionul li em:hover {
  cursor: default;
  /* color: red; */
}

.functionul li:hover em,
.functionul li:hover .icon {
  /* color: #0099ff !important; */
  color: #000 !important;
  font-weight: 600;
}

.chosenColor {
  /* color: #0099ff !important; */
  color: #000 !important;
  font-weight: 600;
}

.carouselbox {
  height: 100%;
  background-color: orange;
}
</style>
